<!DOCTYPE html>
<html class="loginHtml">
<head>
  <meta charset="utf-8">
  <title>仓库管理系统 - 注册</title>
  <meta name="renderer" content="webkit">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
  <meta name="apple-mobile-web-app-status-bar-style" content="black">
  <meta name="apple-mobile-web-app-capable" content="yes">
  <meta name="format-detection" content="telephone=no">
  <link rel="icon" href="/resources/favicon.ico">
  <link rel="stylesheet" href="/resources/layui/css/layui.css" media="all" />
  <link rel="stylesheet" href="/resources/css/public.css" media="all" />
  <style>
    /* 确保性别标签的样式正确 */
    .layui-form-item input-item label {
      display: block;
      margin-bottom: 5px;
    }
    .message {
      margin-top: 10px;
      padding: 10px;
      border-radius: 5px;
      position: fixed; /* 使消息框固定定位 */
      top: 100px; /* 靠上一点点 */
      left: 50%; /* 水平居中 */
      transform: translateX(-50%); /* 水平居中 */
      opacity: 0;
      transition: opacity 1s ease-out; /* 消失动画 */
      z-index: 1000; /* 确保消息框在最上层 */
      border: 1px solid #add8e6; /* 添加边框 */
      background-color: #add8e6; /* 浅蓝色背景 */
      font-size: 16px; /* 加大字体 */
      font-family: 方正兰亭纤黑简体; /* 宋体字体 */
    }
    .message.show {
      opacity: 1;
    }
    .success {
      background-color: #dff0d8;
      color: #3c763d;
    }
    .error {
      background-color: #f2dede;
      color: #a94442;
    }
  </style>
</head>
<body class="loginBody">
<form class="layui-form">
  <div class="login_face"><img src="/resources/images/head.jpg" class="userAvatar"></div>

  <div class="layui-form-item input-item">
    <label for="username">用户名</label>
    <input type="text" id="username" placeholder="请输入用户名" autocomplete="off" name="loginname" class="layui-input" lay-verify="required">
  </div>

  <div class="layui-form-item input-item">
    <label for="password">密码</label>
    <input type="password" id="password" placeholder="请输入密码" autocomplete="off" name="pwd" class="layui-input" lay-verify="required">
  </div>

  <div class="layui-form-item input-item">
    <label for="name">姓名</label>
    <input type="text" id="name" placeholder="请输入姓名" autocomplete="off" name="name" class="layui-input" lay-verify="required">
  </div>

  <div class="layui-form-item">
    <button class="layui-btn layui-block" lay-filter="register" lay-submit>注册</button>
  </div>
  <div class="layui-form-item">
    <button class="layui-btn layui-btn-primary layui-btn-sm" id="login" style="width: 100px; margin: 0 auto;" type="button" >已有账号？登录</button>
  </div>
</form>

<div id="message" class="message"></div>

<script type="text/javascript" src="/resources/layui/layui.js"></script>
<script type="text/javascript" src="/resources/js/cache.js"></script>

<script type="text/javascript">
  layui.use(['form', 'layer', 'jquery'], function() {
    var form = layui.form,
            layer = parent.layer === undefined ? layui.layer : top.layer;
    $ = layui.jquery;


    $('#login').on('click', function(){
      console.log('Register button clicked');
      window.location.href = '/toLogin'; // 替换为你要跳转的目标URL
    });

    form.on("submit(register)", function(data) {
      var btn = $(this);
      btn.text("注册中...").attr("disabled", "disabled").addClass("layui-disabled");
      $.post("/sys/register", data.field, function(rs) {
        btn.text("注册").attr("disabled", false).removeClass("layui-disabled");
        if (rs.success) {
          showMessage('注册成功！', 'success');
          setTimeout(function() {
            window.location.href = '/sys/toLogin';
          }, 2000); // 2秒后跳转到登录页面
        } else {
          showMessage(rs.msg, 'error');
        }
      }).fail(function() {
        btn.text("注册").attr("disabled", false).removeClass("layui-disabled");
        showMessage('注册失败，请重试！', 'error');
      });
      return false;
    });

    // 显示消息提示
    function showMessage(text, type) {
      $('#message').text(text).addClass(type).removeClass('success error');
      $('#message').text(text).addClass(type).removeClass('success error').addClass('show');
      setTimeout(function() {
        $('#message').removeClass('show');
      }, 3000); // 3秒后消失
    }

    // 表单输入效果
    $(".loginBody .input-item").click(function(e) {
      e.stopPropagation();
      $(this).addClass("layui-input-focus").find(".layui-input").focus();
    });
    $(".loginBody .layui-form-item .layui-input").focus(function() {
      $(this).parent().addClass("layui-input-focus");
    });
    $(".loginBody .layui-form-item .layui-input").blur(function() {
      $(this).parent().removeClass("layui-input-focus");
      if ($(this).val() != '') {
        $(this).parent().addClass("layui-input-active");
      } else {
        $(this).parent().removeClass("layui-input-active");
      }
    });
  });
</script>
</body>
</html>

